
import { useReducer, useState } from 'react';
import './static/index.css';
// 案例一：定义 Reducer
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return state + 1;
    case 'decrement':
      return state - 1;
    default:
      throw new Error();
  }
}
// 使用 Reducer 的组件
function Counter() {
  const [count, dispatch] = useReducer(counterReducer, 0);
  return (
    <div style={{ border: '1xp solid red', backgroundColor: 'red' }}>
      Count: {count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

const list = [
  { id: 10, text: '吃饭', done: true },
  { id: 11, text: '睡觉', done: false },
  { id: 12, text: '打豆豆', done: false },
];
//  案例二：定义 Reducer
function listReducer(state, action) {

  /* 
  当点击添加时输入框输入123打印如下
  [{...},{...},{...}] {type: 'add', text: '123'}
  */
  console.log(state, action);
  const { index, newItem } = action;
  switch (action.type) {
    case 'add':
      return [
        ...state,
        {
          id: state.length,
          text: action.text,
          done: false,
        }
      ];
    case 'dowAdd':
      
      return [
        ...state.slice(0, index+1),
        newItem,
        ...state.slice(1+index),
      ];
    
    case 'upAdd':
      
      return [
        ...state.slice(0, index),
        newItem,
        ...state.slice(index),
      ];
    case 'edit':
      
      return state.map(item => {

        if (item.id === action.id) {
          return {
            ...item,
            text: action.text,
          }
        } else {
          return item;
        }
      })
    case 'delete':
      console.log('delete', action);
      return state.filter(item => item.id !== action.id);
    default:
      throw new Error();
  }
}

// 使用 Reducer 的组件
function TaskLists() {
  const [tasklist, dispatch] = useReducer(listReducer, list);
  const [input, setInput] = useState('');

  const handleSubmit = (type, e) => {
    console.log(e);
    switch (type) {
      case 'add':
        dispatch({ type: 'add', id: Date.now(), text: input });
        setInput('')
        break;
      case 'dowAdd'://e 为要插入数据的下标
        if (typeof e === 'number' && e >= 0 && e < tasklist.length) {
          dispatch({
            type: 'dowAdd',
            index: e,
            newItem: { id: Date.now(), text: input, done: false },
          });
          setInput(''); // 清空输入框
        } else {
          alert('请输入有效的插入位置');
        }
        break;
      case 'delete':
        dispatch({ type: 'delete', id: e });
        break;
      default:
        break;
    }

  };

  return (
    <div style={{ padding: '10px', backgroundColor: 'green' }}>
      <input type="text" value={input} onChange={(e) => { setInput(e.target.value) }} />
      <button onClick={() => {  handleSubmit("add");  }}>添加</button>
      <ul>
        {tasklist.map((todo,i) => (
          <li key={todo.id} className='li'>
            <p> {todo.text}</p>
            <p>
              <button onClick={() => { handleSubmit("dowAdd", i) }}>向下插入数据</button>
              <button onClick={() => { handleSubmit("delete", todo.id) }}>删除</button>
            </p>
            
          </li>
        ))}
      </ul>
    </div>
  );
}


function App() {

  return (
    <div>
      <Counter />
      <TaskLists />
    </div>

  );
}

export default App;
